<template>
  <div class="Login">
    <div
      class="cover"
      :class="{'active-cover':animate}"
    />
    <div 
      class="loging-register-box"
      :class="{'active-form':animate}"
    >
      
      <section class="loging-register-form">
        <div class="login-title">
          <img src="~/assets/img/login_logo.png" class="logo">
          <span>EMS 平台</span>
        </div>
        <div
          class="tab-body"
        >
          <el-form
            ref="loginForm"
            class="login-form"
            auto-complete="on"
            label-position="left"
          >
            <el-form-item prop="username">
              <el-input
                class="form-inp"
                ref="username"
                v-model.trim="loginForm.username"
                placeholder="请输入账号"
                name="account"
                v-validate="'required'"
                type="text"
                tabindex="1"
                auto-complete="on"
                @keyup.enter.native="handleLogin"
              >
                <img slot="prefix" src="~assets/img/man.png" class="inp-pre">
              </el-input>
              <div v-show="errors.has('account')" class="el-form-item__error login-err">
                {{ errors.first("account") }}
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                class="form-inp"
                ref="password"
                v-model.trim="loginForm.password"
                type="password"
                placeholder="请输入密码"
                name="password"
                v-validate="'required'"
                tabindex="2"
                auto-complete="on"
                @keyup.enter.native="handleLogin"
              >
                <img slot="prefix" src="~assets/img/lock.png" class="inp-pre">
              </el-input>
              <div v-show="errors.has('password')" class="el-form-item__error login-err">
                {{ errors.first("password") }}
              </div>
            </el-form-item>
            <div class="forget">
              <img src="~assets/img/ques.png" class="ques-icon">
              <span>忘记密码</span>
            </div>
          </el-form>
          <el-button
            class="login-button"
          
            type="primary"
            @click.native.prevent="handleLogin"
          >
            登录
          </el-button>
        </div>
        
      </section>
    </div>
  </div>
</template>

<script>
import * as api from "@/api";
export default {
  layout: 'login',
  data(){
    return{
      animate: false,
      loginForm: {
        username: '',
        password: ''
      },
      // name: "",
      
    }
  },

  methods:{
    handleLogin() {
      this.$validator.validateAll().then((valid) => {
        if (valid) {
          this.login()
        }
      })
    },

    setStorage(data) {
      localStorage.setItem("access_token", data.access_token);
      localStorage.setItem("refresh_token", data.refresh_token);
      localStorage.setItem("username", data.name);
      localStorage.setItem("organization_id", data.organization_id);
      localStorage.setItem("user_id", data.user_id);
    },

    toHome(data) {
      this.$message.success("登录成功");
      this.setStorage(data)
      this.$router.push("/status");
    },
    
    async login() {
      const { code, data } = await api.login(this).login({
        account: this.loginForm.username,
        password: window.btoa(this.loginForm.password)
      })
      if (code === 0) {
        this.toHome(data)
      }
    }
  },
  created() {

  },

  mounted() {
    this.animate = true
  }


}
</script>

<style lang="stylus">

</style>
